<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom4" style="height: 150px;"></div>
    </div>
</template>
<script>
import { Bar } from '@antv/g2plot';
export default {
    data() {
        return {
            title: '服务事项概览',
            params: {
                page: 1,
                pageSize: 100
            },
            BarData: []
        }
    },
    methods: {
        loadBar() {
            const data = [
                {
                    type: '山西农大主体育场工程',
                    sales: 3,
                    colorKey: 'project1' // 用于区分颜色的标识
                },
                {
                    type: '太原理工大学一号教学楼工程',
                    sales: 2,
                    colorKey: 'project2' // 用于区分颜色的标识
                },
                {
                    type: '中北大学',
                    sales: 3,
                    colorKey: 'project3' // 用于区分颜色的标识
                },
                {
                    type: '兰州理工大学',
                    sales: 4,
                    colorKey: 'project3' // 用于区分颜色的标识
                },
                {
                    type: '包头师范学院',
                    sales: 1,
                    colorKey: 'project4' // 用于区分颜色的标识
                },
                {
                    type: '一号工程',
                    sales: 2,
                    colorKey: 'project5' // 用于区分颜色的标识
                }
            ];

            const barPlot = new Bar(this.$refs.bottom4, {
                data,
                xField: 'sales',
                yField: 'type',
                color: ({ type }) => {
                    if (type === '一号工程') {
                        return '#a6a2ec';
                    }
                    else if(type === '包头师范学院'){
                        return '#B9B7BD';
                    }
                    else if(type === '兰州理工大学'){
                        return '#FFD877';
                    }
                    else if(type === '太原理工大学一号教学楼工程'){
                        return '#DCECCB';
                    }
                    else if(type === '山西农大主体育场工程'){
                        return '#FF8C94' ;
                    }
                    return 'pink';
                },
                tooltip: { showMarkers: false,
                    domStyles:{
                        "g2-tooltip":{
                            background:'#147',
                            color:"white",
                            fontSize:20
                        }
                    }
                 },
                state: {
                    active: {
                        style: {
                            shadowBlur: 4,
                            stroke: '#000',
                            fill: 'red',
                        },
                    },
                },
                // 配置x轴字段的对象 
                xAxis: {
                    label: {
                        style: {
                            // 设置线的颜色
                            stroke: 'white',
                            fill: "white",
                            fontSize: 14
                        }
                    }
                },
                // 配置y轴字段对象 
                yAxis: {
                    label: {
                        style: {
                            stroke: 'white',
                            fill: "white",
                            fontSize: 14
                        }
                    }
                },
                // 设置动画
                animation: {
                    appear: {
                        animation: 'scale-in-x',
                        duration: 5000,
                    },
                },
                meta: {
                    type: {
                        alias: 'id',
                    },
                    sales: {
                        alias: '连接设备树',
                    },
                },
                minBarWidth: 20,
                maxBarWidth: 20,
            });

            barPlot.render();
        },
    },
    mounted() {
        this.loadBar();
    }
}
</script>
<style lang="less" scoped></style>
